<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <div class="search">
            <el-form ref="form" :model="staffSearch" :inline="true" size="mini">
                <el-form-item label="姓名：">
                    <el-input v-model="staffSearch.name" clearable placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="手机号：">
                    <el-input v-model="staffSearch.phone" clearable placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchClick(2)">查 询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="btn" v-if="jurisdiction.add_state === 1">
            <el-button size="medium" type="primary" @click="add()">添 加</el-button>
        </div>
        <span v-else></span>
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="staffTable"
                border
                height="560"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                <!-- <el-table-column type="selection" width="60px"></el-table-column> -->
                <el-table-column label="序号" width="80px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商户号" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.merchant_num }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="姓名" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="手机号" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.phone }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="加入日期" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.create_time*1000 | formatDate }} {{ scope.row.create_time*1000 | formatDateBehind }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="设备数" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.equipment_num }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="门店" width="100px">
                    <template slot-scope="scope">
                        <span class="cup" @click="lookShop(scope.$index, scope.row)">查看</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="240px">
                    <template slot-scope="scope">
                        <el-button
                            v-if="jurisdiction.update_state === 1"
                            size="small"
                            type="primary"
                            @click="edit(scope.$index, scope.row)"
                        >修改</el-button>
                        <el-button
                            size="small"
                            type="warning"
                            @click="detail(scope.$index, scope.row)"
                        >详情</el-button>
                        <el-button 
                            v-if="jurisdiction.delete_state === 1"
                            size="small"
                            type="danger"
                            @click="delstaff(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
        </div>
        <div>
            <!-- 添加对话框 -->
            <el-dialog title="添加" width="600px" :visible.sync="addVisible" center @close="closeAdd">
                <el-form :model="addStaff" :rules="addRules" label-position="left" ref="addStaff">
                    <el-form-item label="姓名：" prop="name" :label-width="formLabelWidth">
                        <el-input clearable v-model="addStaff.name" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="商户号：" prop="merchant_num" :label-width="formLabelWidth">
                        <el-input clearable @blur="addverify" v-model="addStaff.merchant_num" placeholder="请输入商户号"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号：" prop="phone" :label-width="formLabelWidth">
                        <el-input clearable v-model="addStaff.phone" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="设备数：" :label-width="formLabelWidth">
                        <el-input clearable v-model="addStaff.equipment_num" placeholder="请输入设备数"></el-input>
                    </el-form-item> -->
                    <el-form-item label="登录密码：" prop="password" :label-width="formLabelWidth">
                        <el-input clearable v-model="addStaff.password" placeholder="请设置登录密码"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="商户等级：" prop="level" :label-width="formLabelWidth">
                        <el-select clearable v-model="addStaff.level" placeholder="请设置登录密码">
                            <el-option label="加盟商" value="0"></el-option>
                            <el-option label="加盟商员工" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="上级商户：" prop="top_id" :label-width="formLabelWidth" v-show="addStaff.level === '1'">
                        <el-input clearable v-model="addStaff.top_id" placeholder="选择上级商户"></el-input>
                    </el-form-item> -->
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelAdd">取 消</el-button>
                    <el-button type="primary" :disabled="verifystate" @click="confirmAdd">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 修改对话框 -->
            <el-dialog title="修改" width="600px" :visible.sync="editVisible" center @close="closeEdit">
                <el-form :model="editStaff" :rules="addRules" ref="editStaff">
                    <el-form-item label="姓名：" prop="name" :label-width="formLabelWidth">
                        <el-input clearable v-model="editStaff.name" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="商户号：" prop="merchant_num" :label-width="formLabelWidth">
                        <el-input clearable v-model="editStaff.merchant_num" placeholder="请输入商户号"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号：" prop="phone" :label-width="formLabelWidth">
                        <el-input clearable v-model="editStaff.phone" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelEdit">取 消</el-button>
                    <el-button type="primary" @click="confirmEdit">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 详情对话框 -->
            <el-dialog
                title="详情"
                width="800px"
                :visible.sync="detailVisible"
                center
                @close="closeDetail"
            >
                <el-form :model="detailStaff">
                    <el-form-item
                        label="姓名："
                        prop="name"
                        :label-width="formLabelWidth"
                    >{{detailStaff.name}}</el-form-item>
                    <el-form-item
                        label="商户号："
                        prop="merchant_num"
                        :label-width="formLabelWidth"
                    >{{detailStaff.merchant_num}}</el-form-item>
                    <el-form-item
                        label="手机号："
                        prop="phone"
                        :label-width="formLabelWidth"
                    >{{detailStaff.phone}}</el-form-item>
                </el-form>
                <p class="tc f14 b00a mb5">*此处仅显示前三台设备的的大概信息，详情可点击门店查看</p>
                <el-table
                    :data="detailData"
                    border
                    :cell-style="cellStyle"
                    :header-cell-style="rowClass"
                >
                    <el-table-column show-overflow-tooltip label="设备号">
                        <template slot-scope="scope">
                            <span>{{ scope.row.number }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="店名">
                        <template slot-scope="scope">
                            <span>{{ scope.row.shop_id | filname }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import "../../../../static/scss/page.scss";
import utils from "../../../util/request";
import {formatDate } from '../../../util/time.js';
var that
export default {
    data() {
        return {
            // 分页
            jurisdiction: null,
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            addVisible: false, //添加对话框
            editVisible: false, //修改对话框
            detailVisible: false, //详情对话框
            formLabelWidth: "100px", //表单label宽度
            verifystate: true,
            shopname: null,
            businessname: null,
            addStaff: {
                //添加对话框表单
                name: "", //姓名
                merchant_num: '',//商户号
                phone: '',//手机
                create_time: '',//时间
                equipment_num: '',//设备数
                password: '',//登录密码
                level: '',
                top_id:''//商户员工的上级
            },
            editStaff: {
                //修改对话框表单
                name: "", //姓名
                merchant_num: "", //商户号
                phone: "" //手机号
            },
            detailStaff: {
                //详情对话框表单
                name: "", //姓名
                // merchant_num: "", //商户号
                phone: "" //手机号
            },
            staffSearch: {
                //搜索
                name: "", //姓名
                phone: "" //手机号
            },
            detailData: [
                {
                    number: "123", //设备号
                    shop_id: "深圳分店" //店名
                }
            ],
            staffTable: [
                // 表单数据
                {
                    merchant_num: "123456", //商户号
                    name: "人员1", //姓名
                    phone: "15247862354", //手机号
                    joinDate: "2020-07-30", //加入日期
                    equipmentCount:2, //设备数
                },
                {
                    merchant_num: "145235", //商户号
                    name: "人员2", //姓名
                    phone: "15247862354", //手机号
                    joinDate: "2020-08-08", //加入日期
                    equipmentCount:2, //设备数
                },
                {
                    merchant_num: "174852", //商户号
                    name: "人员3", //姓名
                    phone: "15247862354", //手机号
                    joinDate: "2020-08-15", //加入日期
                    equipmentCount:2, //设备数
                }
            ],
            addRules: {
                // 表单验证
                name: [
                    {
                        required: true,
                        message: "请输入姓名",
                        trigger: "blur"
                    }
                ],
                merchant_num: [
                    {
                        required: true,
                        message: "请输入商户号",
                        trigger: "blur"
                    }
                ],
                phone: [
                    {
                        required: true,
                        message: "请输入手机号",
                        trigger: "blur"
                    }
                ],
                name: [
                    {
                        required: true,
                        message: "请输入姓名",
                        trigger: "blur"
                    }
                ], //姓名
                merchant_num: [
                    {
                        required: true,
                        message: "请输入商户商户号",
                        trigger: "blur"
                    }
                ],//商户号
                phone: [
                    {
                        required: true,
                        message: "请输入手机号",
                        trigger: "blur"
                    }
                ],//手机
                equipment_num: [
                    {
                        required: true,
                        message: "请输入设备数量",
                        trigger: "blur"
                    }
                ],//设备数
                password: [
                    {
                        required: true,
                        message: "请输入登录的密码",
                        trigger: "blur"
                    }
                ],//登录密码
                level:[
                    {
                        required: true,
                        message: "请选择加盟商等级",
                        trigger: "change"
                    } 
                ],
                top_id:[
                    { required: true,
                        message: "请选择所属加盟商",
                        trigger: "change"  
                    }
                ]
            }
        };
    },
    filters:{
        
        // 店名
        filname(id){
            that.shopname.forEach(item=>{
                id === item.id ? id = item.name : "";
            })
            return id
        },
        // 时间
		formatDate(time){
			var date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd');
		},
		formatDateBehind(time){
			var date = new Date(time);
			return formatDate(date, 'hh:mm:ss')
		}
    },
    methods: {
        searchClick(num) {
            // 查询
            let data = {page:this.currentPage,list_rows:this.currentCount,level:"0"}
            for(var i in this.staffSearch) this.staffSearch[i] !== '' ? data[i] = this.staffSearch[i] : '';
            // console.log(data,this.userSearch)
            console.log(data)
            utils.request("/business/list","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                this.staffTable = resp.data.data.data;
                this.pageResultSize = resp.data.data.total;
                if(num === 2){    
                    this.$message({
                        message: "为您找到"+resp.data.data.total+'位商户',
                        type: "success"
                    })
                }
            })
        },
        add() {
            // 添加
            this.addVisible = true;
        },
        addverify(){
            // 商户号验证防止重复
            var regu = "^[ ]+$";
            var re = new RegExp(regu);
            // console.log()
            let data = {page:this.currentPage,list_rows:this.currentCount,level:"0"}
            this.addStaff.merchant_num != "" && !re.test(this.addStaff.merchant_num) ? data.merchant_num = this.addStaff.merchant_num : "";
            // console.log(data)
            utils.request("/business/list","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                // console.log(this.addStaff.merchant_num==" ",this.addStaff.merchant_num==null,this.addStaff.merchant_num==undefined,this.addStaff.merchant_num==NaN)
                if(resp.data.data.data.length > 0){
                    this.$message.error("商户号已存在或者输入为空，请重新填写")
                }else{
                    this.$message({
                        message: "商户号可用！",
                        type: "success"
                    })
                    this.verifystate = false;
                }
            })
        },
        confirmAdd() {
            // 确认添加
            // console.log(this.addStaff.staffStatus);
            this.$refs["addStaff"].validate(valid => {
                if (valid) {
                    let that = this;
                    let data  = {};
                    for(var i in this.addStaff) that.addStaff[i] !== "" ? data[i] = that.addStaff[i] : data[i] = "0";
                    let timestamp = Date.parse(new Date());
                    data.create_time = String(timestamp/1000)
                    console.log(data)
                    utils.request("/business/add","post",JSON.stringify(data)).then(resp=>{
                        // console.log(resp)
                        data.id = resp.data.data;
                        that.staffTable.push(data)
                        this.addVisible = false;
                        for(var o in this.addStaff) this.addStaff[o] = "";
                        this.verifystate = false;
                    })
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        cancelAdd() {
            // 取消添加
            this.addVisible = false;
            this.$refs["addStaff"].resetFields();
            for(var o in this.addStaff) this.addStaff[o] = "";
            this.verifystate = false;
            // this.addStaff.idNumber = "";
            // this.addStaff.address = "";
            // this.addStaff.qqNumber = "";
            // this.addStaff.email = "";
            // this.addStaff.remark = "";
        },
        closeAdd() {
            // 关闭添加对话框
            this.addVisible = false;
            for(var o in this.addStaff) this.addStaff[o] = "";
            // this.addStaff.idNumber = "";
            // this.addStaff.address = "";
            // this.addStaff.qqNumber = "";
            // this.addStaff.email = "";
            // this.addStaff.remark = "";
            this.$refs["addStaff"].resetFields();
            this.verifystate = false;
        },
        staffSexFilterHandler(value, row, column) {
            // 性别筛选过滤事件
            const property = column["property"];
            return row[property] === value;
        },
        staffStatusFilterHandler(value, row, column) {
            // 状态筛选过滤事件
            const property = column["property"];
            return row[property] === value;
        },
        edit(index, row) {
            // 修改
            this.editVisible = true;
            // for(var o in this.editStaff) this.editStaff[o] = row[o];
            this.editStaff.name = row.name;
            this.editStaff.merchant_num = row.merchant_num;
            this.editStaff.phone = row.phone;
            this.editStaff.id = row.id;
            this.editStaff.index = index;
        },
        confirmEdit() {
            // 确认修改
            this.$refs["editStaff"].validate(valid => {
                if (valid) {
                    let that = this;
                    let data = {};
                    for(var i in this.editStaff) i!=="index" ? data[i] = this.editStaff[i] : '';
                    console.log(data)
                    utils.request("/business/update","post",JSON.stringify(data)).then(resp=>{
                        console.log(resp)
                        this.editVisible = false;
                        let key = that.editStaff.index;
                        for(var o in data) 
                        that.staffTable[key][o] = data[o], 
                        that.editStaff[o] = '',
                        that.editStaff.index = '';
                    })
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        cancelEdit() {
            // 取消修改
            this.editVisible = false;
            // this.editStaff.idNumber = "";
            // this.editStaff.address = "";
            // this.editStaff.qqNumber = "";
            // this.editStaff.email = "";
            // this.editStaff.remark = "";
            for(var i in this.editStaff) this.editStaff[i] = '';
            this.$refs["editStaff"].resetFields();
        },
        closeEdit() {
            // 关闭修改对话框
            this.editVisible = false;
            // this.editStaff.idNumber = "";
            // this.editStaff.address = "";
            // this.editStaff.qqNumber = "";
            // this.editStaff.email = "";
            // this.editStaff.remark = "";
            
            for(var i in this.editStaff) this.editStaff[i] = '';
            this.$refs["editStaff"].resetFields();
        },
        detail(index, row) {
            // 详情
            utils.request("/equipment/list","post",JSON.stringify({page:1,list_rows:999999,business_id:row.id})).then(resp=>{
                console.log(resp)
                if(resp.data.code === 200){
                    this.detailData = resp.data.data.data;
                }else{return}
                this.detailStaff.name = row.name;
                this.detailStaff.merchant_num = row.merchant_num;
                this.detailStaff.phone = row.phone;
            })
            this.detailVisible = true;
        },
        closeDetail() {
            // 关闭详情对话框
            this.detailVisible = false;
        },
        delstaff(index, row) {
            // 删除
            // this.$router.push({ path: "/equipmentDetail", query: { row: row } });
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                utils.request("/business/delete","post",JSON.stringify({id:row.id})).then(resp=>{
                    console.log(resp)
                    this.staffTable.splice(index,1);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        allSelectionChange: function(val) {
            // 获取选中的内容
            console.log(val);
        },
        lookShop(index, row){
            console.log(index,row)
            this.$router.push({ path: "/shop", query: { row: JSON.stringify(row) } })
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
            this.searchClick(1)
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
            this.searchClick(1)
        }
    },
    created() {
        let Base64 = require("js-base64").Base64;
        let menuarr = JSON.parse(Base64.decode(sessionStorage.getItem("menuarr")))
        for(var i=0;i<menuarr.length;i++){
            // console.log(menuarr[i].link)
            if(menuarr[i].link === this.$route.path){
                this.jurisdiction = menuarr[i]
            }else{}
        }
        console.log(this.jurisdiction)
        // console.log(this.activerouter)
        utils.request("/business/list","post",JSON.stringify({page:1,list_rows:9999999999,levle:"0"})).then(resp=>{
            console.log(resp)
            this.businessname = resp.data.data.data;
        })
        this.searchClick(1)
        utils.request("/shop/list","post",JSON.stringify({page:1,list_rows:9999999999})).then(resp=>{
            // console.log(resp)
            this.shopname = resp.data.data.data;
        })
    },
    beforeCreate() {
        that = this;
    },
};
</script>



